<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>华富</title>
  <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/common.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
  <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
      html,
      body {
        font-size: 1.2rem;
        background: #ffffff;
        color: #333333 !important
      }
      .class_detail_img{
        width:100%;
        margin-bottom: 4.8rem;
      }
      .class_detail_img1{
        margin-bottom: 1rem;
      }

      /**footer**/
      .footer {
        height: 4.8rem;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px 0px 1rem 0px rgba(0,0,0,0.05)
      }
      .footer_left {
        height: 100%;
        float: left;
        width: 45%;
        padding: 0.85rem 0;
      }
      .footer_left > div {
        width: 33.333%;
        float: left;
        height: 100%;
        color: #000000;
        font-size: 1rem;
        line-height: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px solid rgba(0,0,0,0.15);
      }
      .footer_left > div:last-of-type {
        border-right: none;
      }
      .footer_left > div > img {
        height:1.7rem;
        margin: 0 auto 0.35rem;
      }
      .footer_right {
        height: 100%;
        float: left;
        width: 55%;
      }
      .footer_rightL,.footer_rightR {
        width: 50%;
        height: 100%;
        float: left;
        text-align: center;
        overflow: hidden;
      }
      .footer_rightL {
        background-image: linear-gradient(-90deg,#ff9501 0%,#ffb001 48%,#ffca00 100%),linear-gradient(90deg,#79c735 0%,#65a032 100%);
        background-blend-mode: normal,normal;
        color: #fff;
        font-size: 1.6rem;
        line-height: 4.8rem;
      }
      .footer_rightR {
        background-image: linear-gradient(-90deg,
        #ff4e18 0%,
        #f9280d 52%,
        #f20101 100%),
      linear-gradient(
        #ff8600,
        #ff8600);
      background-blend-mode: normal,
        normal;
        color: #fff;
        font-size: 1.6rem;
        line-height: 4.8rem;
      }
      /**footer**/

    </style>
</head>

<body>
  <div id="app">
    <div class="wrapper">
      <div class="aui-refresh-content">
      <div class="class_detail_img">
        <div class="content_xqcont">
            <iframe :src="goodsInfo.goods_detail_url" style="width: 100%;border:none;" id="cnt_iframe" iframeborder="0"></iframe>
        </div>
      </div>
      </div>
      <div class="footer">
        <div class="footer_left">
          <div  @click="shopShow()">
            <img src="../../image/class/footer_left1.png" alt="">
            店铺
          </div>
          <div @click="chatShow()">
            <img src="../../image/class/footer_left2.png" alt="">
            客服
          </div>
          <div>
            <img src="../../image/class/footer_left31.png" alt="" v-if="goodsInfo.is_collect == 0">
            <img src="../../image/class/footer_left3.png" alt="" v-else>
            收藏
          </div>
        </div>
        <div class="footer_right">
          <div class="footer_rightL" @click="getSkuList(1)">加入购物车</div>
          <!-- <div class="footer_rightL" @click="flag2=true;">加入购物车</div> -->
          <div class="footer_rightR" @click="getSkuList(2)">立即购买</div>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.js"></script> -->
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript">
    apiready = function() {
      var app = new Vue({
          el: '#app',
          data: {
            goodsId:'',
            goodsInfo:[],
            goodsInfoStore:[],
            goodsInfoComment:[],
            goodsSkuInfo:[],
            goods_ps:[],
            goods_ps1:[],
            goods_ps_cont:[],
            token:'',
            num:1
          },
          created: function() {
            var $_this=this;
            api.showProgress({
                title: '努力加载中...',
                text: '先喝杯茶...',
                modal: false
            });

            $_this.getDetail();
            // $_this.getSkuList();
          },
          methods: {
            getDetail:function(){
              var $_this=this;
              api.showProgress({
                  title: '努力加载中...',
                  text: '先喝杯茶...',
                  modal: false
              });

              if(api.pageParam.goodsId){
                $_this.goodsId=api.pageParam.goodsId;
              }

              if($api.getStorage('token')){
                $_this.token=$api.getStorage('token');
              }
              // console.log($_this.goodsId);

              const data = {
                 token:$_this.token,
                 goods_id:$_this.goodsId
              }
              Axios.post(window.Url.goods_info,data).then(function(res){
                if(res.status==1){
                  // api.hideProgress();
                  // console.log(JSON.stringify(res))
                  $_this.goodsInfo=res;
                  $_this.goodsInfoStore=res.store_info;
                  $_this.goodsInfoComment=res.comment_info;
                  $_this.$nextTick(function () {
                    // bannerSwiper();
                    setIframeHeight();
                  })
                }else{
                  api.toast({
                      msg:res,
                      duration: 2000,
                      location: 'bottom'
                  });
                }
              }).catch((err) => {
                api.alert({ msg: JSON.stringify(err) });
              })
            },
            getSkuList:function(type){
              var $_this=this;
              if($_this.goodsInfo.is_sku == 0){
                $_this.goSubmit(type);
              }else if($_this.goodsInfo.is_sku == 1){
                  api.openFrame({
                      name: 'mallPurse',
                      url: './mall_purse.html',
                      pageParam:{
                        type:type,
                        goodsId:$_this.goodsId
                      }
                  })
              }

            },
            goSubmit:function(type){
              var $_this=this;
              if(type == 1){
                const data = {
                   token:$_this.token,
                   goods_id:$_this.goodsId,
                   sku_id:'',
                   goods_nums:1
                }
                Axios.post(window.Url.add_cart,data).then(function(res){
                  if(res.status==1){
                    alert(res.info)
                  }else{
                    api.toast({
                        msg:res,
                        duration: 2000,
                        location: 'bottom'
                    });
                  }
                }).catch((err) => {
                  api.alert({ msg: JSON.stringify(err) });
                })
              }else if(type == 2){
                api.openWin({
                    name: 'orderTrue',
                    url: '../cart/order_true.html',
                    pageParam: {
                        type: 1,
                        goods_id:$_this.goodsId,
                        sku_id:'',
                        goods_nums:1
                    }
                });
              }

            },
            buyNow: function(type, id) {
                var $_this = this;
                const data = {
                   token:$_this.token,
                   goods_id:$_this.goodsId,
                   sku_id:'',
                   goods_nums:1
                }
                Axios.post(window.Url.add_cart,data).then(function(res){
                  if(res.status==1){
                    // alert(res.info)
                  }else{
                    api.toast({
                        msg:res,
                        duration: 2000,
                        location: 'bottom'
                    });
                  }
                }).catch((err) => {
                  api.alert({ msg: JSON.stringify(err) });
                })
            }

          },
          mounted: function () {
            api.hideProgress();
            setRefresh();
          }
        })
    };

    //刷新
    function setRefresh(){
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }

    function setIframeHeight() {
        setTimeout(function(){
          var iframe_height = $("#cnt_iframe").contents().find("#content").height();
          $('#cnt_iframe').height(iframe_height+20);
        },500);
    };

    //打开店铺页面
    function shopShow(){
      api.openWin({
          name: 'shop',
          url: './shop.html',
          pageParam: {
              test:''
          }
      });
    }
</script>

</html>
